Understanding font-style, font-variant, and font-weight in CSS
CSS provides several properties to control the appearance of text. font-style, font-variant, and font-weight each serve distinct purposes.
font-style – Controls the slant of text.
- Common values:
normal(default),italic,oblique. - Example: Emphasizing text with italics.
- Common values:
font-variant – Controls the use of alternate glyphs such as small-caps.
- Common values:
normal,small-caps. - Example: Making lowercase letters appear as uppercase but smaller.
- Common values:
font-weight – Controls the thickness or boldness of text.
- Common values:
normal(400),bold(700),100-900for fine-grained control. - Example: Emphasizing text visually without changing semantic meaning.
- Common values:
In this example, each property independently affects the text: italics for slant, small-caps for typographic style, and font-weight for thickness.
font-styleis for slanting text (italic,oblique).font-variantis for typographic alternates likesmall-caps.font-weightis for boldness or lightness of text.These properties can be combined for richer text styling.
Always use semantic HTML (
<em>,<strong>) with CSS for accessible emphasis.